<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AlertsCategoryList.ascx.cs" Inherits="AlertsCategoryList" %>
<style>
/* 主容器样式 */
.table-container, .threshold-container {
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa, #e1e9f0);
    border-radius: 12px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 750px;
    margin: 20px auto;
    font-family: 'Arial', sans-serif;
}

/* 表头样式 */
table.alert-table th {
    background: linear-gradient(90deg, #f76b1c, #f5522f);
    color: white;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* 表格行样式 */
table.alert-table tr {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

table.alert-table tr:hover {
    transform: scale(1.02);
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15);
}

/* 警报信息单元格样式 */
table.alert-table td {
    padding: 12px;
    color: #333;
    font-size: 14px;
    text-align: center;
    border-bottom: 1px solid #dcdcdc;
    background-color: #ffffff;
    border-radius: 6px;
}

/* 描述信息样式 */
table.alert-table .details {
    padding: 15px;
    background-color: #fff8e1;
    border-top: 1px solid #ffd54f;
    font-size: 13px;
    color: #333;
    border-radius: 10px;
    margin-top: 8px;
    box-shadow: inset 0px 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* 状态样式 */
.pending-status {
    background-color: #fff8e1;
    color: #a67c00;
    padding: 8px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 13px;
}

.resolved-status {
    background-color: #d7f7e0;
    color: #388e3c;
    padding: 8px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 13px;
}

/* 处理按钮样式 */
.alert-button {
    background-color: #f76b1c;
    color: white;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.alert-button:hover {
    background-color: #d84315;
    transform: scale(1.05);
}

</style>

<div class="table-container">
    <h2 style="color: #f4511e; text-align: center;">异常警报</h2>
    <asp:Repeater ID="Repeater1" runat="server">
        <HeaderTemplate>
            <table class="alert-table">
                <tr>
                    <th>警报类型</th>
                    <th>警报数量</th>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <span class="alert-icon">⚠️</span>
                    <a href="javascript:void(0)" onclick="toggleDetails('<%# Eval("CategoryName") %>')">
                        <%# Eval("CategoryName") %>
                    </a>
                    <span id="icon_<%# Eval("CategoryName") %>" class="expand-icon">▼</span>
                    <div id="<%# Eval("CategoryName") %>" class="details">
                        <asp:Repeater ID="DetailRepeater" runat="server" DataSource='<%# GetAlertDetails(Eval("CategoryName").ToString()) %>'>
    <ItemTemplate>
        <p class='<%# Eval("状态").ToString() == "待处理" ? "pending-status" : "resolved-status" %>'>
            学生 ID: <%# Eval("old_id") %><br /> <!-- 添加老人 ID 显示 -->
            描述: <%# Eval("描述") %>, 时间: <%# Eval("时间", "{0:yyyy-MM-dd HH:mm}") %>, 状态: <%# Eval("状态") %> - <%# Eval("状态") %>
            <asp:Button ID="btnProcess" runat="server" Text="处理" CommandArgument='<%# Eval("警报id") %>' OnClick="btnProcess_Click2" Visible='<%# Eval("状态").ToString() == "待处理" %>' />
        </p>
    </ItemTemplate>
</asp:Repeater>


                    </div>
                </td>
                <td>(<%# Eval("AlertCount") %>)</td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>
</div>


<script>
    function toggleDetails(id) {
        const details = document.getElementById(id);
        const icon = document.getElementById("icon_" + id);

        if (details.style.display === "none" || details.style.display === "") {
            details.style.display = "block";
            icon.classList.add("expanded");
        } else {
            details.style.display = "none";
            icon.classList.remove("expanded");
        }
    }
</script>

